<div id="slipSelectBar" class="slipselect-bar">
</div>
<div id="maskSlipSelectDiv" class="mask-slipselect-div" style="display: none;" onclick="closeSlipSelectDiv()"></div>

<script type="text/javascript">
        function openSlipSelectDiv(option, html) {
            //加载选择内容
            setHtml('slipSelectBar', html);

            //设置已选条件
            if (option != '') {
                objList = getItem('slipSelectBar').children[0].children;
                for (var i = 0; i < objList.length; i++) {
                    if (option == objList[i].innerHTML) {
                        objList[i].className = 'select-option-select';
                        break;
                    }
                }
            }

            setDisplay('maskSlipSelectDiv', '');
            document.body.style.overflow = 'hidden';
            setClass('slipSelectBar', 'slipselect-bar-out');
        }

        function closeSlipSelectDiv() {
            setHtml('slipSelectBar', '');
            setDisplay('maskSlipSelectDiv', 'none');
            document.body.style.overflow = 'visible';
            setClass('slipSelectBar', 'slipselect-bar-in');
        }

        function getSelectItemList(textid, valueid, list) {
            var html = '<div class="select-bar">';
            for (var i = 0; i < list.length; i++) {
                if (valueid != '') {
                    html += '<div class="select-option" onclick="selectOptionItem(\'' + textid + '\', \'' + list[i].text + '\', \'' + valueid + '\', \'' + list[i].value + '\')">' + list[i].text + '</div>';
                }
                else {
                    html += '<div class="select-option" onclick="selectOptionItem(\'' + textid + '\', \'' + list[i].text + '\', \'\', \'\')">' + list[i].text + '</div>';
                }
            }
            html += '</div>';

            return html;
        }

        function loadSelectItemList(htmlid, textid, valueid, list) {
            setHtml(htmlid, '');

            var html = '<div class="select-bar">';
            for (var i = 0; i < list.length; i++) {
                if (valueid != '') {
                    html += '<div class="select-option" onclick="selectOptionItem(\'' + textid + '\', \'' + list[i].text + '\', \'' + valueid + '\', \'' + list[i].value + '\')">' + list[i].text + '</div>';
                }
                else {
                    html += '<div class="select-option" onclick="selectOptionItem(\'' + textid + '\', \'' + list[i].text + '\', \'\', \'\')">' + list[i].text + '</div>';
                }
            }
            html += '</div>';

            setHtml(htmlid, html);
        }

        function selectOptionItem(textid, text, valueid, value) {
            setValue(textid, text);
            if (valueid != '' && value != '') {
                setValue(valueid, value);
            }
            closeSlipSelectDiv();

            getItem(textid).dispatchEvent(new Event('change'));
        }
</script>

<style type="text/css">
        .slipselect-bar, .slipselect-bar-out, .slipselect-bar-in
        {
            width: 100%;
            height: 40%;
            bottom: -40%;
            background-color: white;
            overflow-x: hidden;
            overflow-y: scroll;
            position: fixed;
            z-index: 201;
        }

        .slipselect-bar-out
        {
            -webkit-animation: slipselectout 0.1s;
            bottom: 0;
        }

        .slipselect-bar-in
        {
            -webkit-animation: slipselectin 0.1s;
            bottom: -40%;
        }

        @keyframes slipselectout
        {
            from { bottom: -40%; }
            to { bottom: 0; }
        }

        @keyframes slipselectin
        {
            from { bottom: 0; }
            to { bottom: -40%; }
        }

        .mask-slipselect-div
        {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 200;
        }

        .select-bar
        {
            width: 100%;
            height: 100%;
            background-color: white;
            /*overflow-x: hidden;
            overflow-y: scroll;
            white-space: nowrap;
            -ms-overflow-style: none;
            scrollbar-width: none;*/
        }

        /*.select-bar::-webkit-scrollbar
        {
            display: none;
        }*/

        .select-option
        {
            padding: 30px 20px 30px 20px;
            color: #333333;
            font-size: 32px;
            text-align: center;
            border-bottom: 1px solid #E4E4E4;
        }

        .select-option-select
        {
            padding: 30px 20px 30px 20px;
            color: var(--theme-color);
            font-size: 32px;
            text-align: center;
            border-bottom: 1px solid #E4E4E4;
        }
</style>